/**
 * 泛娱区块链 - Mine
 * @zaric
 * 我的资产
 */

'use strict';

import React from 'react'
import { StyleSheet, View, ImageBackground, TouchableOpacity, Text } from 'react-native'
import Images from '../../asset';
import NavigationBar from '../../component/navigation/NavigationBar'
import Theme from '../../config/themes/Theme';
import ListView from '../../component/list/ListView';
import ImageView from '../../component/common/ImageView';

class MyAssets extends React.Component {

    constructor(props) {
        super(props);
        this.state = { member_balance: '0', dataSource: [] };
        this.page = 1
    }

    componentDidMount() {
        this.requestInfo();
        this.requestDataSources();
    }

    requestInfo = async () => {
        let url = ServicesApi.MEMBER_DETAIL;
        let data = {
            member_id: global.secretKey ,
        };
        const result = await Services.post(url, data);
        // console.log('我的资产返回----------->',result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            if (result.data.member_balance) {
                this.setState({ member_balance: result.data.member_balance });
            }
        }
    };

    requestDataSources = async () => {
        const limit = 10;
        let url = ServicesApi.TASK_INFO_QUERY_TODAY;
        let data = {
            limit,
            page: this.page,
            create_user: global.secretKey,
        };
        const result = await Services.post(url, data);
        // console.log('我的任务返回--------->',result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            if (this.page === 1) {
                this.setState({ dataSource: result.data })
            } else if (this.page > 1 && result.data.length !== 0) {
                let oldData = this.state.dataSource.slice();
                oldData = oldData.concat(result.data);
                this.setState({ dataSource: oldData });
            }
        }
        this._listViewRef && this._listViewRef.stopRefresh();
        this._listViewRef && this._listViewRef.stopEndReached({ allLoad: result.data.length < limit });
    };

    _onRefresh = (stopRefresh) => {
        this.page = 1;
        this.requestDataSources()
    };

    _onEndReached = (stopEndReached) => {
        this.page++;
        this.requestDataSources()
    };
    _renderItem = ({ item, index }) => {
        const task_quantity = item.task_quantity ? item.task_quantity : 0;
        const finish_count = item.finish_count ? item.finish_count : 0;
        return (
            <View style={styles.itemView}>
                <View style={styles.itemTopView}>
                    <Text style={styles.taskName}>{item.task_title}</Text>
                    <ImageView style={styles.itemImage} source={finish_count === task_quantity ? Images.icon_complete : Images.icon_no_complete} />
                </View>
                <Text style={styles.taskContent}>{item.task_content}</Text>
                <Text style={finish_count === task_quantity ? styles.taskNumBlack : styles.taskNumYellow}>{finish_count}/{task_quantity}</Text>
            </View>
        )
    };

    _keyExtractor = (item, index) => {
        return `item${index}`
    };

    _captureRef = (v) => {
        this._listViewRef = v
    };


    render() {
        const { member_balance, dataSource } = this.state;
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'我的资产'}
                />
                <View style={styles.cutLine} />
                <ImageBackground style={styles.topView} source={Images.icon_assets_bg}>

                    <View style={styles.topTopView}>
                        <View style={styles.assetsHintView}>
                            <Text style={styles.hintText}>我的总资产</Text>
                            <ImageView style={styles.hintImage} source={Images.icon_assets} />
                        </View>
                        <TouchableOpacity
                            onPress={() => {RouterHelper.navigate('积分明细','PointDetail')}}
                            style={styles.pointDetailView}
                        >
                            <Text style={styles.hintText}>积分明细</Text>
                            <ImageView style={styles.hintImage} source={Images.icon_white_right_arrow} />
                        </TouchableOpacity>
                    </View>
                    <View style={styles.taskView}>
                        <Text style={styles.pointText}>{member_balance}</Text>
                        <Text style={[styles.hintText, { marginBottom: 5, marginLeft: 5 }]}>积分</Text>
                    </View>
                </ImageBackground>
                <View style={styles.centerHintView}>
                    <View style={styles.pointView} />
                    <Text style={styles.pointTask}>积分任务</Text>
                </View>
                <ListView
                    ref={this._captureRef}
                    initialRefresh={false}
                    enableLoadMore={false} //这个接口后台没做分页
                    enableRefresh={true}
                    data={dataSource}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                    ItemSeparatorComponent={null}
                    onRefresh={this._onRefresh}
                    onEndReached={this._onEndReached}
                    ListHeaderComponent={null}
                    style={styles.listView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    cutLine: {
        width: Theme.screenWidth,
        height: 6,
        backgroundColor: '#f5f5f5'
    },
    topView: {
        width: Theme.screenWidth - 30,
        height: 120,
        marginTop: 5,
        marginHorizontal: 15,
    },
    pointView: {
        height: 20,
        width: 8,
        backgroundColor: Theme.themeColor,
        marginRight: 8
    },
    topTopView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginVertical: 5,
        alignItems: 'center',
    },
    assetsHintView: {
        flexDirection: 'row',
        marginHorizontal: 6,
        alignItems: 'center',
    },
    pointDetailView: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 10,
    },
    hintImage: {
        width: 13,
        height: 13,
        marginLeft: 3,
    },
    hintText: {
        color: '#fff',
        fontSize: FontSize(14),
    },
    taskView: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        paddingBottom: 10,
        alignItems: 'flex-end'
    },
    pointText: {
        color: '#fff',
        fontSize: FontSize(36),
    },
    centerHintView: {
        marginTop: 23,
        marginBottom: 15,
        marginLeft: 15,
        flexDirection: 'row'
    },
    pointTask: {
        fontSize: FontSize(14),
        color: '#333'
    },
    listView: {
        flex: 1,
    },
    itemView: {
        flexDirection: 'column',
        borderColor: '#ff9e40',
        borderRadius: 5,
        borderWidth: Theme.minPixel,
        marginHorizontal: 15,
        marginVertical: 5,
    },
    itemTopView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    itemImage: {
        width: 60,
        height: 22,
    },
    taskName: {
        color: '#333',
        marginTop: 10,
        marginBottom: 5,
        marginHorizontal: 10,
        fontSize: FontSize(14),
    },
    taskContent: {
        fontSize: FontSize(12),
        color: '#666',
        marginHorizontal: 10,
        marginVertical: 5,
    },
    taskNumBlack: {
        alignSelf: 'flex-end',
        fontSize: FontSize(12),
        color: '#333',
        marginHorizontal: 10,
        marginVertical: 5,
    },
    taskNumYellow: {
        alignSelf: 'flex-end',
        fontSize: FontSize(12),
        color: '#ff9e40',
        marginHorizontal: 10,
        marginVertical: 5,
    },
});
export default MyAssets